<template>
	<view>
		<view style="background: #fa1e8a;" class="box flex a-t">
			<view style="text-align: center;">
				<image :src="vuex_user_content.my_avatar" mode="widthFix" style="width: 60px;border-radius: 50%;margin-right: -10px;"></image>
				<image :src="vuex_user_content.ta_avatar" mode="widthFix" style="width: 60px;border-radius: 50%;"></image>
				<view class="f12 cf">
					你拍了
					<text>{{ datalist.my_album_count }}</text>
					张/Ta拍了
					<text>{{ datalist.ta_album_count }}</text>
					张
				</view>
			</view>
			<view style="margin-left: auto;">
				<!-- <view class="but">
					邀请Ta
				</view> -->
				<button open-type="share" class="but f12" style="width: 100px;text-align: center;margin:10px auto 0 auto;">邀请Ta</button>
				<view class="cf f12" style="margin-top: 10px;">拍视频记录你们的每一天</view>
			</view>
		</view>
		<view>
			<view class="box">
				<view class="w100 flex" v-for="(item, index) in datalist.list" style="overflow: hidden;margin-top: 20rpx;">
					<view
						class=""
						style="height: 120px;overflow: hidden;border-radius: 8px;overflow: hidden;padding: 0;width: 45%;border: #fa1e8a dashed 1px;box-sizing: border-box;position: relative;"
					>
						<image v-if="item.my_image" :src="item.my_image" style="width: 100%;" mode="widthFix"></image>
						<view v-else>这天我没发</view>
						<view
							v-if="item.my_image"
							@click="shebeijing(item.id)"
							style="position: absolute;background: rgba(0,0,0,0.5);color: #fff;line-height: 36px;left: 0;bottom: 0;width: 100%;text-align: center;"
						>
							设为空间背景
						</view>
					</view>
					<view class="flex a-t j-t" style="width: 10%;text-align: center;">
						<view>
							{{ item.day }}
							<view>{{ item.month }}</view>
						</view>
					</view>
					<view
						class=""
						style="height: 120px;overflow: hidden;border-radius: 8px;overflow: hidden;padding: 0;width: 45%;border: #fa1e8a dashed 1px;box-sizing: border-box;line-height: 120px;text-align: center;"
					>
						<image v-if="item.ta_image" :src="item.ta_image" style="width: 100%;" mode="widthFix"></image>
						<view v-else>这天ta没发</view>
						<!-- <image :src="item.image" style="width: 100%;" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view
			@click="shangchuan"
			class="button f14"
			style="width: 120px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 95px; left: 50%; margin-left: -60px; "
		>
			拍一段
			<!-- <u-input v-model="value" :type="type" :border="border" @click="show = true" /> -->
		</view>
		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			datalist: [],
			actionSheetList: [
				{
					text: '照片'
				},
				{
					text: '视频'
				}
			]
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fa1e8a'
		});
	},
	onShow() {
		this.album();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '快来和我一起记录生活吧',
			path: '/pages/content/content'
		};
	},
	methods: {
		async shebeijing(e) {
			let data = {
				my_space_id: this.vuex_user_content.id,
				album_id: e
			};
			let res = await this.$u.api.background(data);
			console.log(res);
			uni.showToast({
				title: '设置成功',
				icon: 'none'
			});
		},

		actionSheetCallback(index) {
			console.log(index);
			if (index == 0) {
				this.tu();
			}
			if (index == 1) {
				this.video();
			}
			// this.value = this.actionSheetList[index].text;
		},
		async upload(temp) {
			const path = await this.uploader(temp);

			let data = {
				image: path,
				my_space_id: this.vuex_user_content.id
			};
			this.$u.api.AlbumSave(data).then(res => {
				this.album();
			});
		},
		tu() {
			uni.chooseImage({
				count: 1, //默认9
				success: res => {
					console.log(res.tempFilePaths);
					this.upload(res.tempFilePaths[0]);
				}
			});
		},
		video() {
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success: res => {
					this.upload(res.tempFilePath);
					// self.src = res.tempFilePath;
				}
			});
		},
		async album() {
			let data = {
				my_space_id: this.vuex_user_content.id
			};
			let res = await this.$u.api.album(data);
			this.datalist = res;
		},
		shangchuan() {
		    let self = this;
            // 拍照
            // #ifdef MP
            if(self.vuex_site_config.sub_msg_photograph.wechat){
                uni.requestSubscribeMessage({
                    tmplIds: [self.vuex_site_config.sub_msg_photograph.wechat],
                    success (res) { }
                })
            }
            // #endif

            // #ifdef MP-TOUTIAO
            if(self.vuex_site_config.sub_msg_photograph.byte){
                tt.requestSubscribeMessage({
                    tmplIds: [self.vuex_site_config.sub_msg_photograph.byte],
                    success (res) { }
                })
            }
            // #endif

			this.tu();
			// let data={
			// 	my_space_id:this.vuex_user_content.id
			// }
			// let res = await this.$u.api.AlbumSave(data)
			// if(res){
			// 	this.album()
			// }
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.but {
	width: 120px;
	height: 34px;
	line-height: 34px;
	color: #fff;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 30px;
	text-align: center;
}
</style>
